<template>
  <div>
    <div class="dataModal">
      <div class="dataModalcontent">
        <div class="dataModalhead">
          <div class="dataModalheaddiv">
            <div>
              <img src="../assets/images/point.png" alt="" />
              户籍数据绑定 - {{ bindData.name }}
            </div>
            <div class="dataEdit">
              <el-button
                icon="el-icon-close"
                circle
                @click="toBack"
              ></el-button>
            </div>
          </div>
          <img class="splitLine" src="../assets/images/Divider6.png" />
        </div>
        <div class="dataModalbody">
          <div class="dataModallable">
            <div class="tab-tit">
              <div
                class="tab-tithead"
                v-for="(title, index) in bindData.childList"
                :key="index"
                @click="activeTab(index)"
                :class="{ active: cur == index }"
              >
                {{ title.name }}
              </div>
            </div>
            <div class="tab-content">
              <div
                v-for="(item, index) in bindData.childList"
                v-show="cur == index"
                :key="index"
              >
                <div
                  class="bindBody"
                  v-for="(items, inx) in item.childList"
                  :key="inx"
                >
                  <div class="bindCont">
                    <div class="bindUnit" @click="lightwindow(items)">
                      <div class="bindUnittext">
                        {{
                          items.name.substring(items.name.lastIndexOf("_") + 1)
                        }}
                      </div>
                    </div>
                    <div
                      @click="lightwindow(items)"
                      class="bindBildIdiv"
                      v-if="items.childList != null"
                    >
                      <div
                        class="bindBildId"
                        v-for="(obj, i) in items.childList"
                        :key="i"
                        :class="[
                          items.name == bindID && lightBindWindow
                            ? 'bindactive'
                            : '',
                        ]"
                      >
                        <div class="bindBildIdtext">
                          {{
                            obj.name.substring(obj.name.lastIndexOf("_") + -1)
                          }}
                        </div>
                      </div>
                    </div>
                    <div
                      class="bindBildIdiv"
                      v-else-if="items.name === selectedId"
                    >
                      <div
                        class="bindBildId"
                        v-for="(obj, i) in windowsList"
                        :key="i"
                      >
                        <div class="bindBildIdtext">{{ obj }}</div>
                      </div>
                    </div>
                    <div class="bindBtn">
                      <div
                        class="delBingbtn"
                        @click="delBing(items)"
                        v-if="items.isBind == 1"
                      >
                        解除绑定
                      </div>
                      <div v-else-if="items.isBind == 0">
                        <div
                          v-if="items.name != selectedId"
                          class="addBingbtn"
                          @click="addBing(items)"
                        >
                          添加绑定
                        </div>
                        <div
                          v-if="items.name === selectedId"
                          class="addBingbtn"
                          @click="toSubmit(items)"
                        >
                          保存
                        </div>
                        <div
                          v-if="items.name === selectedId"
                          class="delBingbtn"
                          @click="toClose(items)"
                        >
                          取消
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "detail",
  props: {
    bindData: {
      type: Object,
      default: () => {},
    },
    windowsData: {
      type: Array,
      default: () => [],
    },
    lightBindWindow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {},
      isEdit: false,
      isBind: true,
      submitShow: false,
      selectedId: null,
      bindID: null,
      cur: 0, //默认选中第一个tab
    };
  },
  computed: {
    windowsList() {
      return this.windowsData;
    },
  },
  methods: {
    activeTab(index) {
      this.cur = index;
      this.windowsList = [];
      this.selectedId = null;
    },
    toSubmit(item) {
      this.selectedId = null;
      this.$emit("toSubmit", item);
    },
    toClose(item) {
      this.selectedId = null;
      this.$emit("toCloseBind", item);
    },
    addBing(item) {
      this.selectedId = item.name;
      this.$emit("addBing", item);
    },
    delBing(item) {
      this.$emit("delBing", item);
    },
    lightwindow(item) {
      this.bindID = item.childList[0].parentName;
      console.log("bindID", this.bindID);
      this.$emit("lightwindow", item);
    },
    toBack() {
      this.$emit("toBack", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.dataModal {
  height: 765px;
  width: 561px;
  background: url("../assets/images/bingingBg.png");
  background-repeat: no-repeat;
  z-index: 1;
  color: #fff;
  .dataModalcontent {
    .dataModalhead {
      text-align: left;
      font-size: 22px;
      color: #fff;
      padding: 15px 30px 0 30px;
      .dataModalheaddiv {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .dataModalbody {
      // display: flex;
      // flex-wrap: wrap;
      // justify-content: center;
      color: #fff;
      margin-top: 3px;
      padding: 0 30px;
    }
  }
}
.tab-tit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
.tab-tithead {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.active {
  color: #ffffff;
  background-color: #2b495d;
  border-radius: 10px 10px 0 0;
  border: 1px solid #62edff;
  border-bottom: none;
  z-index: 1;
}
.tab-content {
  width: 501px;
  height: 640px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(5, 30, 50, 0.65);
  border: 1px solid #62edff;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  margin-top: -1px;
}
.bindBody {
  width: 501px !important;
  .bindCont {
    display: flex;
    align-items: center;
    padding: 15px 0;
    margin: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    .bindUnit {
      margin-right: 10px;
      // width: 73px;
      height: 35px;
      line-height: 35px;
      border: 1px solid #ffffff;
      opacity: 1;
      border-radius: 5px;
      padding: 0 5px;
      cursor: pointer;
      .bindUnittext {
        font-size: 26px;
      }
    }
    .bindBildIdiv {
      width: 400px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      cursor: pointer;
      .bindBildId {
        min-width: 82px;
        height: 22px;
        line-height: 22px;
        border-radius: 5px;
        padding: 0 5px;
        background: rgba(209, 250, 255, 0.2);
        margin: 5px 3px;
        .bindBildIdtext {
          color: #ffffff;
        }
      }
      .bindactive {
        background: #0080ff;
      }
    }
    .bindBtn {
      margin-left: 10px;
      .delBingbtn {
        width: 84px;
        height: 35px;
        line-height: 35px;
        background: rgba(5, 30, 50, 0.65);
        border: 1px solid #ffb549;
        color: #ffb549;
        opacity: 1;
        border-radius: 5px;
        cursor: pointer;
      }
      .addBingbtn {
        width: 84px;
        height: 35px;
        line-height: 35px;
        background: rgba(5, 30, 50, 0.65);
        border: 1px solid #62edff;
        color: #62edff;
        opacity: 1;
        border-radius: 5px;
        cursor: pointer;
        margin: 5px 0;
      }
    }
  }
}
.dataEdit {
  display: flex;
  justify-content: flex-end;
}
.tab-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
/*滚动条里面小方块样式*/
.tab-content::-webkit-scrollbar-thumb {
  border-radius: 100px;
  // -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.3);
}
/*滚动条里面轨道样式*/
.tab-content::-webkit-scrollbar-track {
  // -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: transparent;
}
</style>
